import React, { Component } from 'react'
import { Card, Row, Col, Timeline, Button, Table, Input, Form, Modal, Select, InputNumber,Breadcrumb, message} from 'antd'
import "../../assets/style/order/orderDetai.scss";
import { getCommten, getRefundData} from "../../api/index"
const columns = [
  {
    title: "时间",
    dataIndex: "date",
  },
  {
    title: "操作人",
    dataIndex: "name",
  },
  {
    title: "留言内容",
    dataIndex: "content"
  }
]
const refundColum = [{
  title: "时间",
  dataIndex:"time"
}, {
    title: "操作人",
    dataIndex: "person"
  }, {
    title: "金额",
    dataIndex: "money"
  }

]
export default class orderDetais extends Component {
  constructor() {
    super()
    this.state = {
      data: [],
      visible: false,
      refundData:[]
    }
  }

  async componentDidMount() {
    this.getCommtendata()
    this.getRefundData()
    // const  data  = await getPage()
    // const data= await test()
    // console.log(data);
  }
  getCommtendata = async () => {
    const { data } = await getCommten()
    console.log(data);
    this.setState({
      data: data
    })
    console.log(this.state.data)
  }
  send = (value) => {
    console.log(value);
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  getRefundData =async () => {
    const { data } = await getRefundData()
    this.setState({
      refundData:data
    })
    console.log(data);
  }
  chufa = () => {
    document.getElementById("submit").click()
  }
  render() {
    const { data,refundData } = this.state
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>订单管理</Breadcrumb.Item>
          <Breadcrumb.Item>订单详情</Breadcrumb.Item>
        </Breadcrumb>
        <Modal
          title="录入支付单"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={1000}
          cancelText="关闭"
          okText="提交"
          footer={[<Button key="1" onClick={this.chufa}>提交</Button>, <Button key="2" onClick={this.handleCancel}>取消</Button>]}
          // okButtonProps={{type:"submit"}}
        >
          <Row>
            <Col span={12} className={"orderCheck"} style={{ padding: 20 }}>
              <Form onFinish={this.handleOk}>
                <Form.Item label="支付单类型" name="orderType">
                  <Select placeholder="请选择退款类型">
                    <Select.Option value="part">
                      部分退款
                </Select.Option>
                    <Select.Option>
                      全额退款
                </Select.Option>
                  </Select>
                </Form.Item >
                <Form.Item label="退款类型" name="refundType">
                  <Select placeholder="请选择退款类型">
                    <Select.Option value="原路退回">
                      原路退回
                </Select.Option>
                    <Select.Option value="非原路退回">
                      非原路退回
                </Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item name="money" label="退款金额">
                  <InputNumber
                    precision={2}
                    style={{width:"100%"}}
                  ></InputNumber>
                </Form.Item>
                <Form.Item label="支付原因" name="reson">
                  <Input.TextArea></Input.TextArea>
                </Form.Item>
                <Form.Item>
                  <Button htmlType="submit" id="submit"></Button>
                </Form.Item>
              </Form>
            </Col>
            <Col span={12} style={{padding:20}}>
              <Row className={'refundInfo'}>
                <Col span={12}>
                  <p>订单价格：<span className={'money'}>￥ 20.00</span> </p>
                  <p>剩余金额：<span className={'money'}>￥ 20.00</span> </p>
                  <p>已退金额：<span className={'money'}>￥ 20.00</span> </p>
                </Col>
                <Col span={12}>
                  <p>商品价格：<span className={"money"}>￥21</span></p>
                  <p>购买数量：<span className={"money"}>2</span></p>
                </Col>
              </Row>
              <Row>
                <Table title={() => "历史退款记录"} dataSource={refundData} columns={refundColum} rowKey={data => data.id}>
                  
                </Table>
              </Row>
            </Col>
            </Row>
        </Modal>
        <Card >
          <Row >
            <Col span={8} className={"container"}>
              <h1>订单历史</h1>
              <Timeline className="orderHistory" mode="left">
                <Timeline.Item color="gray" label="2015-09-01">
                  用户签收
                </Timeline.Item>
                <Timeline.Item color="red" label="2015-09-01">
                  商家发货
                </Timeline.Item>
                <Timeline.Item color="green" label="2015-09-01">
                  用户支付
                </Timeline.Item>
                <Timeline.Item color="green" label="2015-09-01">
                  用户下单
                </Timeline.Item>
              </Timeline>
              <Row style={{ textAlign: "center" }}>
                <Button type="primary" className={"dealRfund"} onClick={() => message.success("退款已处理")}>处理退款</Button>
                <Button type="primary" className={"applyRfund"} onClick={this.showModal}>申请退款</Button>
                <Button type="primary" className={"confirmReceipt "} onClick={()=>message.success("已确认收获")}>确认收货</Button>
              </Row>
            </Col>
            <Col span={8} className={"container"}>
              <h1 style={{ marginLeft: 20 }}>订单信息</h1>
              <Row className="orderInfo">
                <Col span={12} className="orderInfoItem">
                  <p>订单渠道：</p>
                  <p>订单ID：</p>
                  <p>订单状态：</p>
                  <p>份数：</p>
                  <p>商品ID：</p>
                  <p>商品名称：</p>
                  <p>配送方式：</p>
                  <p>快递单号：</p>
                  <p>快递公司：</p>
                </Col>
                <Col span={12} className="orderInfoConten">
                  <p>同程优品小程序</p>
                  <p>TCYP012018040900006</p>
                  <p>已发货</p>
                  <p>2</p>
                  <p>123456</p>
                  <p>云南玫瑰礼品</p>
                  <p>寄送到家</p>
                  <p>400 7556 88</p>
                  <p>百事快递</p>
                </Col>
              </Row>

            </Col>
            <Col span={8} className={"container"}>
              <h1 style={{ marginLeft: 20 }}>交易信息</h1>
              <Row className="payInfo">
                <Col span={12} className="payInfoItem">
                  <p>商品单价：</p>
                  <p>优惠金额：</p>
                  <p>邮费：</p>
                  <p>实际支付：</p>
                  <p>应付供应费：</p>
                  <p>支付流水号：</p>
                  <p>支付交易号：</p>
                </Col>
                <Col span={12} className="payInfoConten">
                  <p>￥25.0 <span>(原价￥30.0)</span></p>
                  <p>￥8.0</p>
                  <p>￥5.0</p>
                  <p>￥47.0(详情25.0*2-8.0+5.0)</p>
                  <p>￥46.0(详情23.0*2)</p>
                  <p>PHD59555555555555555</p>
                  <p>1013085219</p>
                </Col>
              </Row>
              <Row>
              </Row>
            </Col>
          </Row>
        </Card>

        <Card className={"userInfoWrap"}>
          <Row>
            <Col span={8} className={"userInfoItem"}>
              <h1>用户信息</h1>
              <Row className={"userInfoContent"}>
                <Col span={5}>
                  <p>收货人姓名：</p>
                  <p>收货人手机：</p>
                  <p>收货人地址：</p>
                  <p>下单人微信：</p>
                  <p>下单人手机：</p>
                </Col>
                <Col span={14}>
                  <p>詹涵</p>
                  <p>15800913372</p>
                  <p>广东省广州市海珠区客村TTT创意园微信总部</p>
                  <p>花开不败</p>
                  <p>15800913372</p>
                </Col>
              </Row>
            </Col>
            <Col span={16} className={"commentInfo"}>
              <h1>留言信息</h1>
              <Row style={{marginTop:"20px"}}>
                <Col span={24}>
                  <Table columns={columns} dataSource={data} rowKey={data => data.id} bordered />
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Form onFinish={this.send}>
                    <Row>
                      <Col span={16}>
                        <Form.Item name="message">
                          <Input.TextArea maxLength='150' showCount rows={7} cols={80} id="message"/>
                        </Form.Item>
                      </Col>
                      <Col span={8} style={{ display: "flex", flexDirection: "column-reverse" }}>
                        <Form.Item>
                          <Button className={"sendMessage"} type="primary" htmlType="submit">发送留言</Button>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form>
                </Col>
              </Row>
            </Col>
          </Row>
        </Card>
      </div>
    )
  }
}
